<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { createReusableTemplate } from '@vueuse/core';
import { $t } from '@/locales';
import type { XxlJobChartInfo } from '@/service/api';

defineOptions({
  name: 'CardData'
});

interface Props {
  chartData: XxlJobChartInfo;
}

const props = defineProps<Props>();

interface CardData {
  key: string;
  title: string;
  value: number;
  description: string;
  unit: string;
  color: {
    start: string;
    end: string;
  };
  icon: string;
}

const cardData = ref<CardData[]>([]);

interface GradientBgProps {
  gradientColor: string;
}

const [DefineGradientBg, GradientBg] = createReusableTemplate<GradientBgProps>();

function getGradientColor(color: CardData['color']) {
  return `linear-gradient(to bottom right, ${color.start}, ${color.end})`;
}

onMounted(async () => {
  // const { data } = await fetchXxlJobChartInfo();

  if (props.chartData) {
    const executorCount = props.chartData?.executorCount;
    const scheduledTasksCount = props.chartData?.triggerCountRunningTotal;
    const scheduledTotalCount = props.chartData?.triggerCountSucTotal + props.chartData?.triggerCountFailTotal;
    const scheduledFailCount = props.chartData?.triggerCountFailTotal;

    cardData.value = [
      {
        key: 'executorCount',
        title: $t('page.base.xxl.overview.executorCount'),
        value: executorCount,
        description: $t('page.base.xxl.overview.executorDesc'),
        unit: '',
        color: {
          start: '#56cdf3',
          end: '#719de3'
        },
        icon: 'ant-design:api-outlined'
      },
      {
        key: 'scheduledTasksCount',
        title: $t('page.base.xxl.overview.scheduledTasksCount'),
        value: scheduledTasksCount,
        description: $t('page.base.xxl.overview.scheduledTasksDesc'),
        unit: '',
        color: {
          start: '#865ec0',
          end: '#5144b4'
        },
        icon: 'ant-design:bar-chart-outlined'
      },
      {
        key: 'scheduledTotalCount',
        title: $t('page.base.xxl.overview.scheduledTotalCount'),
        value: scheduledTotalCount,
        description: $t('page.base.xxl.overview.scheduledTotalDesc'),
        unit: '',
        color: {
          start: '#ec4786',
          end: '#b955a4'
        },
        icon: 'ant-design:container-outlined'
      },
      {
        key: 'scheduledFailCount',
        title: $t('page.base.xxl.overview.scheduledFailCount'),
        value: scheduledFailCount,
        description: $t('page.base.xxl.overview.scheduledFailDesc'),
        unit: '',
        color: {
          start: '#fcbc25',
          end: '#f68057'
        },
        icon: 'ant-design:bug-outlined'
      }
    ];
  }
});
</script>

<template>
  <NCard :bordered="false" size="small" class="card-wrapper">
    <!-- define component start: GradientBg -->
    <DefineGradientBg v-slot="{ $slots, gradientColor }">
      <div class="rd-8px px-16px pb-4px pt-8px text-white" :style="{ backgroundImage: gradientColor }">
        <component :is="$slots.default" />
      </div>
    </DefineGradientBg>
    <!-- define component end: GradientBg -->

    <NGrid cols="s:1 m:2 l:4" responsive="screen" :x-gap="16" :y-gap="16">
      <NGi v-for="item in cardData" :key="item.key">
        <GradientBg :gradient-color="getGradientColor(item.color)" class="flex-1">
          <h3 class="text-16px">{{ item.title }}</h3>
          <div class="flex justify-between pt-12px">
            <SvgIcon :icon="item.icon" class="text-32px" />
            <div class="text-14px">{{ item.description }}</div>
            <CountTo
              :prefix="item.unit"
              :start-value="1"
              :end-value="item.value"
              class="text-30px text-white dark:text-dark"
            />
          </div>
        </GradientBg>
      </NGi>
    </NGrid>
  </NCard>
</template>

<style scoped></style>
